<template>
	<view class="bg">
		<!-- 品牌详情页 -->
		<!-- 轮播图 -->
		<view class="img">
			<swiper circular indicator-active-color="#8B0000" :indicator-dots="true" :autoplay="true" :interval="2500" :duration="1000" class="swiper">
				<swiper-item class="swiper" v-for="(item, index) in gallery" :key="index">
					<view class="swiper-item">
						<!--  -->
						<image :src="item.img_url" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- icon -->
		<view class="icon">
			<view>
				<u-icon name="checkmark-circle-fill" color="#8B0000"></u-icon>
				<text>30天无忧退货</text>
			</view>
			<view>
				<u-icon name="checkmark-circle-fill" color="#8B0000"></u-icon>
				<text>48小时快速退费</text>
			</view>
			<view>
				<u-icon name="checkmark-circle-fill" color="#8B0000"></u-icon>
				<text>满88元免邮费</text>
			</view>
		</view>
		<view class="item">
			<view class="white">
				<view class="txt1">{{ info.name }}</view>
				<view class="txt2">{{ info.goods_brief }}</view>
				<view class="txt3">{{ info.retail_price | toPrice }} 起</view>
			</view>
		</view>
		<!-- 展示弹出层 -->
		<view class="pull" @tap="click">
			<view class="left">展示弹出层</view>
			<view class="right"><u-icon name="arrow-right" color="#9DACCA" size="20"></u-icon></view>
		</view>
		<!-- 定位 -->
		<view class="pos"><uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" /></view>
		<!-- 商品参数 -->
		<view class="cd-goods-params">
			<view class="cd-goods-title">商品参数</view>
			<view class="cd-goods-attr" v-for="(item, index) in attribute" :key="index">
				<text class="cd-goods-attr-name">{{ item.name }}</text>
				<text class="cd-goods-attr-value">{{ item.value }}</text>
			</view>
		</view>
		<!-- 富文本 -->
		<view class="html" v-html="info.goods_desc"></view>
		<!-- 常见问题 -->
		<view class="more">
			<view class="title">常见问题</view>
			<li class="item2" v-for="(item, index) in issue" :key="index">
				<text class="h1">{{ item.question }}</text>
				<view class="small">{{ item.answer }}</view>
			</li>
		</view>
		<view class="bgs" v-if="isShowadd">
			<view class="product">
				<view class="top1">
					<view class="left"><image :src="info.list_pic_url" mode=""></image></view>
					<view class="right">
						<view class="top2">价格：{{ info.retail_price | toPrice }}</view>
						<view class="bottom">库存：{{ info.goods_number }}</view>
					</view>
				</view>
				<view class="num">数量 :</view>
				<view class="btn3">
					<button class="add" @tap="add(-1)">-</button>
					<text>{{ num1 }}</text>
					<button class="remove" @tap="add(1)">+</button>
				</view>
				<view class="abs"><u-icon name="close" color="#000" size="28" @tap="close"></u-icon></view>
			</view>
		</view>
		<!-- 网页后退 -->
		<pageSwitch></pageSwitch>
	</view>
</template>

<script>
import { detailApi, goodscountApi, relatedApi, addApi, cartaddApi } from '../../utils/api.js';
import pageSwitch from '@/components/pageSwitch/pageSwitch.vue';
import mylist from '../../components/mylist/mylist.vue';
export default {
	data() {
		return {
			isShowadd: false,
			num1: 1,
			info: {
				name: '母亲节礼物-舒适安睡组合',
				goods_brief: '安心舒适是最好的礼物,母亲节礼物',
				retail_price: 2598,
				list_pic_url: 'http://yanxuan.nosdn.127.net/1f67b1970ee20fd572b7202da0ff705d.png',
				goods_desc: ''
			},
			issue: [],
			goodsList: [],
			gallery: [],
			productList: [],
			attribute: [],
			options: [
				{
					icon: 'star',
					text: '收藏'
				},
				{
					icon: 'cart',
					text: '购物车',
					info: 2
				}
			],
			buttonGroup: [
				{
					text: '加入购物车',
					backgroundColor: '#ffa200',
					color: '#fff'
				},
				{
					text: '立即购买',
					color: '#fff',
					backgroundColor: '#ff0000'
				}
			],
			id: '',
			cartTotal: {
				goodsCount: 0
			}
		};
	},
	components: {
		pageSwitch,
		mylist
	},
	onLoad(e) {
		console.log(e.id);
		this.id = e.id;
	},
	async onShow() {
		// 请求购物车数据
		this.getnum();
		let detailApires = await detailApi(this.id || '1181000');
		console.log(detailApires);
		this.info = detailApires.data.info;
		this.issue = detailApires.data.issue;
		this.gallery = detailApires.data.gallery;
		this.attribute = detailApires.data.attribute;
		this.info.goods_desc = this.info.goods_desc.replaceAll('<img', '<img style=display:block;width:100%;');
		// let { brand } = res.data;
		// this.brand = brand;
		this.productList = detailApires.data.productList;
		let relatedApires = await relatedApi(this.id || '1181000');
		// console.log(relatedApires);
		this.goodsList = relatedApires.data.goodsList;
	},
	methods: {
		async getnum() {
			let token = uni.getStorageSync('token');
			let goodscountApimres = await goodscountApi(token);
			console.log(goodscountApimres);
			this.cartTotal = goodscountApimres.data.cartTotal;
			this.options[1].info = this.cartTotal.goodsCount;
		},

		onClick(e) {
			// uni.showToast({
			// 	title: `点击${e.content.text}`,
			// 	icon: 'none'
			// });
			uni.switchTab({
				url: '/pages/cart/cart'
			});
		},
		// 加入购物车
		async buttonClick(e) {
			// console.log(e);
			// this.options[1].info++;
			if (!this.isShowadd) {
				this.isShowadd = true;
				return;
			}
			let id = this.productList[0].id;
			let token = uni.getStorageSync('token');
			console.log(token);
			// return;
			let obj = { productId: id, number: this.num1, goodsId: 1181000 };
			// console.log(obj);
			let res = await addApi(obj, token);
			console.log(res);
			// 添加成功
			if (res) {
				uni.showToast({
					title: `添加成功`,
					icon: 'success'
				});
				this.isShowadd = false;
				this.getnum();
			}
		},
		click() {
			this.isShowadd = true;
		},
		async add(num) {
			if (num == -1 && this.num1 == 1) {
				return;
			}
			this.num1 += num;
		},
		close() {
			this.isShowadd = false;
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #efefef;
}
.cd-goods-params {
	background-color: white;
	padding: 20rpx;
	// width: 700rpx;
	.cd-goods-title {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		font-size: 40rpx;
		line-height: 40rpx;
	}

	.cd-goods-attr {
		display: flex;
		background-color: #efefef;
		margin: 12rpx 0;
		font-size: 20rpx;
		padding: 10rpx 20rpx 10rpx 20rpx;
		// height: 60rpx;
		align-items: center;
		justify-content: center;

		.cd-goods-attr-name {
			color: #a39eaa;
			margin-right: 10rpx;
			text-align: right;
			width: 15vw;
		}

		.cd-goods-attr-value {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			line-height: 40rpx;
			height: 40rpx;

			flex: 1;
			width: 100%;
		}
	}
}
.bg {
	position: relative;
	.pos {
		position: fixed;
		bottom: 0rpx;
		background-color: #fff;
		width: 100vw;
		z-index: 2;
		padding: 10rpx 0;
	}
	.icon {
		display: flex;
		font-size: 30rpx;
		justify-content: space-around;
		padding: 20rpx 0;
		view {
			display: flex;
		}
	}
	.item {
		text-align: center;
		.white {
			background-color: white;
		}
		margin-bottom: 30rpx;
		view {
			font-size: 36rpx;
			padding: 18rpx 0;
		}
		.txt1 {
		}
		.txt3 {
			color: #9b0000;
			margin-bottom: 20rpx;
		}
	}
	.swiper,
	.swiper-item {
		width: 760rpx;
		height: 760rpx;
	}
	.img {
		image {
			width: 100%;
			height: 760rpx;
		}
	}
	.pull {
		display: flex;
		margin: 6rpx 0 20rpx;
		background-color: #fff;
		position: relative;
		box-sizing: border-box;
		padding: 24rpx 34rpx;
		color: #323233;
		font-size: 30rpx;
		line-height: 48rpx;
		justify-content: space-between;
	}
	.html {
		width: 750rpx;
		padding-bottom: 80rpx;
	}
	.more {
		background-color: #fff;
		// padding-bottom: 150rpx;
		.title {
			font-size: 40rpx;
			padding: 10rpx 0;
			text-align: center;
			width: 100%;
			height: 40px;
			background: #fff;
			line-height: 40px;
			margin: auto;
		}

		.item2 {
			text-align: left;
			padding: 0 20rpx;
			color: #9b0000;
			.h1 {
				color: #000;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 34rpx;
				padding-right: 20rpx;
			}
			.small {
				padding-left: 38rpx;
				padding-right: 20rpx;
				color: #666;
				font-size: 30rpx;
			}
		}
	}
	.bgs {
		background-color: #999;
		color: #000;
		opacity: 0.9;
		position: fixed;
		top: 0;
		width: 100vw;
		height: 100vh;

		.product {
			.abs {
				position: absolute;
				top: 10rpx;
				right: 30rpx;
			}
			position: absolute;
			bottom: 100rpx;
			width: 100%;
			height: 450rpx;
			background-color: #fff;
			.top1 {
				display: flex;
				.left {
					image {
						width: 200rpx;
						height: 200rpx;
					}
				}
				.right {
					padding-left: 20rpx;
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					padding-left: 10px;
				}
			}

			.num {
				font-size: 44rpx;
				margin-top: 40rpx;
				margin-bottom: 30rpx;
				margin-left: 30rpx;
			}
		}
	}
	.btn3 {
		margin-left: 30rpx;
		// margin-left: 154rpx;
		width: 200rpx;
		margin-top: 4rpx;
		text-align: center;
		display: flex;
		height: 56rpx;
		line-height: 56rpx;
		button {
			line-height: 56rpx;
			background-color: #f2f3f5;
			width: 70rpx;
		}
		.add {
			text-align: center;
		}
		text {
			width: 56rpx;
			background-color: #f2f3f5;
			padding: 10rpx 20rpx;
			line-height: 40rpx;
			height: 56rpx;
			box-sizing: border-box;
			margin: 0 6rpx;
		}
		.remove {
			text-align: center;
		}
	}
}
</style>
